<template>
	<view class="page">
		<view class="wrapper">
			<view class="text-light text-big">
				请输入购买数量
			</view>
			
			<view class="blank" style="height: 30rpx;">
				
			</view>
			<view class="ipt">
				<input type="number" v-model="num" placeholder="5000~50000">
			</view>
			
			<view class="picker ipt">
				<picker @change="bindPicker" :value="index" :range="array">
					<view class="uni-input">
						{{array[index]}}
						<text class="lg text-gray icon cuIcon-triangledownfill"></text>
					</view>
				</picker>
			</view>
			
			<view class="btn-wrrapper">
				<button class="cu-btn btn block">去购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['CLC', 'BLC'],
				index: 0,
				num: ''
			};
		},
		watch: {
			num(val, old) {
				console.log(val)
				console.log(old)
			}
		},
		methods: {
			bindPicker: function(e) {
				this.index = e.target.value
			}
		}
	}
</script>

<style>
	@import url("/colorui/main.css");
	@import url("/colorui/icon.css");

	.ipt {
		padding: 20rpx;
		background: #141439;
		margin: 20rpx 0;
	}
	
	.picker .uni-input {
		position: relative;
	}
	.picker .icon {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%) scale(2);
	}

	.btn-wrrapper {
		padding: 50rpx;
		margin-top: 200rpx;
	}
	.btn {
		background: #00D388 !important;
		color: #fff;
		font-size: 32rpx;
		height: auto;
		line-height: 2.5;
		letter-spacing: 2rpx;
		padding: 0 40rpx;
	}
</style>
